import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { colors, spacing, typography } from '../styles/variables';
import { Flex } from '../styles/components';

const FooterContainer = styled.footer`
  background: ${colors.backgroundSecondary};
  padding: ${spacing.xl} 0;
  border-top: 1px solid ${colors.border};
  margin-top: ${spacing.xxl};
`;

const FooterContent = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 ${spacing.md};
`;

const Section = styled.div`
  margin-bottom: ${spacing.lg};
`;

const SectionTitle = styled.h3`
  color: ${colors.textPrimary};
  font-size: ${typography.fontSize.lg};
  margin-bottom: ${spacing.md};
  font-weight: ${typography.fontWeight.bold};
`;

const FooterLink = styled(Link)`
  display: block;
  color: ${colors.textSecondary};
  margin-bottom: ${spacing.sm};
  text-decoration: none;
  transition: color 0.3s ease;

  &:hover {
    color: ${colors.primary};
  }
`;

const Copyright = styled.div`
  color: ${colors.textSecondary};
  font-size: ${typography.fontSize.sm};
  text-align: center;
  padding-top: ${spacing.lg};
  border-top: 1px solid ${colors.border};
  margin-top: ${spacing.lg};
`;

const SocialLinks = styled.div`
  display: flex;
  gap: ${spacing.md};
`;

const SocialIcon = styled.a`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: ${colors.backgroundCard};
  color: ${colors.textSecondary};
  transition: all 0.3s ease;

  &:hover {
    background: ${colors.primary};
    color: ${colors.background};
    transform: translateY(-2px);
  }
`;

function Footer() {
  return (
    <FooterContainer>
      <FooterContent>
        <Flex justify="space-between" style={{ flexWrap: 'wrap' }}>
          <Section>
            <SectionTitle>关于我们</SectionTitle>
            <FooterLink to="/about">关于我们</FooterLink>
            <FooterLink to="/contact">联系我们</FooterLink>
            <FooterLink to="/privacy">隐私政策</FooterLink>
            <FooterLink to="/terms">服务条款</FooterLink>
          </Section>
          
          <Section>
            <SectionTitle>功能特色</SectionTitle>
            <FooterLink to="/tools/bazi">八字测算</FooterLink>
            <FooterLink to="/tools/tarot">塔罗占卜</FooterLink>
            <FooterLink to="/tools/dream">周公解梦</FooterLink>
            <FooterLink to="/vip">VIP会员</FooterLink>
          </Section>
          
          <Section>
            <SectionTitle>关注我们</SectionTitle>
            <SocialLinks>
              <SocialIcon href="#" aria-label="微信">
                微
              </SocialIcon>
              <SocialIcon href="#" aria-label="微博">
                博
              </SocialIcon>
              <SocialIcon href="#" aria-label="抖音">
                抖
              </SocialIcon>
            </SocialLinks>
          </Section>
        </Flex>
        
        <Copyright>
          © {new Date().getFullYear()} 灵犀指引. All rights reserved.
        </Copyright>
      </FooterContent>
    </FooterContainer>
  );
}

export default Footer;